<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传框架</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .layui-upload {
            width: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .layui-upload .layui-upload-list {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .layui-upload .layui-upload-list .layui-upload-img {
            width: 80px;
            height: 80px;
            border-radius: 80px;
        }

        .layui-upload .layui-btn {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="layui-upload">
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="avatar-img">
        <p id="demoText"></p>
    </div>
    <button type="button" class="layui-btn" id="btn-upload">修改头像</button>
</div>

<script src="jQuery/jquery-2.1.1.js"></script>
<script src="layui/layui.all.js"></script>
<script>
    let upload = layui.upload;
    //普通图片上传
    let uploadInst = upload.render({
        elem: '#btn-upload',
        url: '/upload/avatar', //改成您自己的上传接口
        before: function (obj) {
            console.log("上传之前...");
        },
        done: function (res) {
            // 要求返回的数据格式必须是json
            console.log(res);
            $("#avatar-img").attr('src', res.src); // 设定图片的网络访问路径
        },
        error: function () {
            //演示失败状态，并实现重传
            let demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
    });
</script>
</body>
</html>